{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% extends "firefox/welcome/base.html" %}

{% block page_title %}{{ page_title }}{% endblock %}

{% block page_image %}{{ static('img/firefox/welcome/page17/pip-hero.jpg') }}{% endblock %}

{% block body_class %}welcome-page17-pip{% endblock %}

{% block page_css %}
  {{ css_bundle('protocol-picto') }}
  {{ css_bundle('firefox_welcome_page17') }}
{% endblock %}

{% if LANG == "de" %}
  {% set page_title = 'Surfe im neuen Jahr sicher durch das Internet und nutze dabei die Bild-im-Bild-Funktion' %}
  {% set main_title = 'Surfe im neuen Jahr sicher durch das Internet und nutze dabei die Bild-im-Bild-Funktion.'|safe %}
  {% set main_tagline = 'Mit der Bild-im-Bild-Funktion kannst du einfach mehrere Aufgaben gleichzeitig bearbeiten und dir die neuesten Tutorials oder Videos angucken, während du arbeitest.' %}
  {% set main_cta = 'Jetzt testen' %}
  {% set picto_one_title = 'Ein Meeting verfolgen und gleichzeitig Notizen machen' %}
  {% set picto_two_title = 'Ein Koch-Tutorial angucken, während du das Rezept anschaust' %}
  {% set picto_three_title = 'Die Kinder entertainen und nebenbei eine E-Mail fertig schreiben' %}
{% elif LANG == "fr" %}
  {% set page_title = 'Mettez cette année sous le signe de la productivité avec l’incrustation vidéo' %}
  {% set main_title = 'Mettez cette année sous le signe de la productivité avec l’incrustation vidéo'|safe %}
  {% set main_tagline = 'Faites plusieurs choses à la fois facilement avec l’incrustation vidéo: visionnez des tutoriels, des enregistrements et plus encore tout en travaillant.' %}
  {% set main_cta = 'L’essayer maintenant' %}
  {% set picto_one_title = 'Suivez une réunion tout en prenant des notes' %}
  {% set picto_two_title = 'Gardez un tutoriel ouvert au-dessus d’une recette' %}
  {% set picto_three_title = 'Divertissez les enfants pendant que vous travaillez' %}
{% else %}
  {% set page_title = 'Do more in the new year with Picture-in-Picture' %}
  {% set main_title = 'Do more in the new year<br> with Picture-in-Picture'|safe %}
  {% set main_tagline = 'Easily multitask with Picture-in-Picture, and catch up on tutorials, recordings and more while you work.' %}
  {% set main_cta = 'Try it now' %}
  {% set picto_one_title = 'Watch a lecture or meeting while you take notes' %}
  {% set picto_two_title = 'Keep a tutorial video open with a recipe while you cook' %}
  {% set picto_three_title = 'Entertain cats, dogs and kids while you get work done' %}
{% endif %}

{% block shoulder_logo %}
  {{ picture(
    url="img/logos/firefox/logo-word-hor.svg",
    sources=[
      {
        "media": "(prefers-color-scheme: light)",
        "srcset": {
          "img/logos/firefox/logo-word-hor.svg": "default",
        }
      },
      {
        "media": "(prefers-color-scheme: dark)",
        "srcset": {
          "img/logos/firefox/logo-word-hor-white.svg": "default",
        }
      }
    ],
    optional_attributes={
      "class": "c-header-logo",
      "alt": "Firefox",
      "width": "120",
      "height": "40",
    }
  ) }}
{% endblock %}

{% block shoulder_cta %}{% endblock %}

{% block content_intro %}
  <section class="c-content-main">
    <div class="mzp-l-content mzp-t-content-md">
      <h1 class="c-main-title">{{ main_title }}</h1>
      <p class="c-main-cta"><a class="mzp-c-button mzp-t-product mzp-t-xl" href="{{ url('firefox.features.picture-in-picture') }}" data-cta-text="Try it now" >{{ main_cta }}</a></p>

      <img src="{{ static('img/firefox/welcome/page17/pip-hero.jpg') }}" alt="" class="c-main-image">
      <h2 class="c-main-subheading">{{ main_tagline }}</h2>
    </div>
  </section>
{% endblock %}

{% block content_body %}
  <div class="mzp-l-content mzp-t-content-md mzp-t-content-nospace">
  </div>
{% endblock %}

{% block content_utility %}
<p>
  <strong>
    <a href="https://support.mozilla.org/kb/firefox-browser-welcome-pages/">
      {{ ftl('welcome-page14-why-see-this') }}
    </a>
  </strong>
</p>
{% endblock %}
